<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>黑马博客注册</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <style>
    #form {
      width: 400px;
      margin: 0 auto;
      margin-top: 100px;
    }

    h1 {
      text-align: center;
    }

    input[type='submit'] {
      width: 100%;
    }
  </style>
</head>

<body>
  <form id="form">
    <h1>注册页面</h1>
    <div class="form-group">
      <input type="text" name="username" id="username" class="form-control input-lg" placeholder="用户名" required>
    </div>

    <div class="form-group">
      <input type="password" name="password" id="password" class="form-control input-lg" placeholder="密码" required>
    </div>

    <div class="form-group">
      <input type="text" name="nickname" id="nickname" class="form-control input-lg" placeholder="昵称" required>
    </div>

    <div class="form-group">
      <input type="submit" value="注册新用户" class="btn btn-primary btn-lg">
    </div>
  </form>

  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    $(function() {
      // 1.1 点击注册新用户发送post请求
      $('#form').on('submit', function(e) {
        // 一定要阻止默认行为，不然会提交两个请求
        e.preventDefault();
        $.ajax({
          type: "post",
          url: "/adduser",
          data: $(this).serialize(),
          dataType: "json",
          success: function (res) {
            // 1.8 前台根据后台返回的数据进行相应操作，如果错误，就弹出错误信息，如果成功就跳转到首页
            if (res.status === 0) {
              alert(res.msg)
            } else {
              location.href="/login"
            }
          }
        });
      })
    })
  </script>
</body>
</html>